{% extends "base_template.html" %}
{% block main %}
<!--            博文内容区 -->
            <div class="col-md-8">
                <h1>最新博文</h1>
                {% for article in blog_articles %}
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">{{ article.title }}</h5>
                        <p class="card-text">作者：{{ article.username }} | 发布时间：{{ article.created_at }}</p>
                        <p class="card-text">{{ article.content|truncatechars:50|safe }}</p>
                        <a href="/blog/{{article.id}}" class="btn btn-primary">阅读更多</a>
                    </div>
                </div>
                {% endfor %}
                <!-- 分页处理 -->
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if blog_articles.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1" aria-label="First">
                                    <span aria-hidden="true">&laquo; 第一页</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ blog_articles.previous_page_number }}" aria-label="Previous">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </li>
                        {% endif %}

                        <li class="page-item disabled">
                            <span class="page-link">第 {{ blog_articles.number }} 页，共 {{ blog_articles.paginator.num_pages }} 页</span>
                        </li>

                        {% if blog_articles.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ blog_articles.next_page_number }}" aria-label="Next">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ blog_articles.paginator.num_pages }}" aria-label="Last">
                                    <span aria-hidden="true">最后一页 &raquo;</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
{% endblock %}